<template>
  <CompOperate
    :field="field"
    :designer="designer"
    :design-state="designState"
    :parent-list="parentList"
    :parent-widget="parentWidget"
    :sub-form-row-id="subFormRowId"
    :sub-form-row-index="subFormRowIndex"
    :sub-form-col-index="subFormColIndex"
    :index-of-parent-list="indexOfParentList"
    :display-style="field.options.displayStyle"
  >
    <div class="scene-DRC-pass-patient-widget" :style="getStyle('head')">
      <div class="widget-inside">
        <!--医生信息-->
        <div class="doctor-patient">
          <template v-for="item in getRoomDoctorInfo">
            <div class="doctor-info flex-box">
              <div class="picture flex-box-left" :data-isPause="item.isPause">
                <img
                  :src="getDoctorPicture(item)"
                  alt="医生"
                  @error="handleError"
                />
              </div>
              <div class="info flex-box-right">
                <div class="flex-box-right-one">
                  <div class="flex-box-right-one-name-Box">
                    <img
                      src="@a/images/design/cartoom/childrenDocterNameBj.png"
                      alt=""
                      style="width: 100%; height: 100%"
                      srcset=""
                    />
                    <div class="flex-box-right-one-name">
                      <ScrollX>{{ item.workerName || "\u00a0" }}</ScrollX>
                    </div>
                  </div>
                  <div class="flex-box-right-one-title-Box">
                    <ScrollX>{{ item.workerTitle || "\u00a0" }}</ScrollX>
                  </div>
                </div>
                <div class="flex-box-right-Two">
                  <ScrollY
                    :content="item.workerIntro || '\u00a0'"
                    :pageDuration="10"
                  />
                </div>
              </div>
            </div>
            <div class="patient-area">
              <div class="currentBox">
                <div class="title">正在就诊</div>
                <div
                  class="name"
                  v-for="patientItem in getPatient(item, 'treatingPatient')"
                >
                  {{ patientItem?.patientName || "\u00a0" }}
                  <img
                    src="@a/images/design/cartoom/touxiang_2.png"
                    alt=""
                    class="touxiangImg"
                  />
                </div>
              </div>
              <div
                :class="index === 0 ? 'patientBox' : 'patientBox-two'"
                v-for="(patientItem, index) in getPatient(
                  item,
                  'waitingPatientList'
                )"
              >
                <div class="patientBox-title">等待就诊</div>
                <div class="patientBox-content">
                  {{ patientItem?.patientName || "\u00a0" }}
                  <img
                    v-if="index === 0"
                    src="@a/images/design/cartoom/touxiang_3.png"
                    alt=""
                    class="touxiangImg"
                  />
                  <img
                    v-else
                    src="@a/images/design/cartoom/touxiang_4.png"
                    alt=""
                    class="touxiangImg"
                  />
                </div>
              </div>
            </div>
          </template>
        </div>
        <!--过号患者-->
        <div class="pass-patient-Box">
          <div class="pass-patient-title">
            当前过号患者
          </div>
          <div class="pass-patient-connect">
            <vue-seamless-scroll
              class="scroll"
              :data="passPatientInfo"
              :class-option="{
                step: 1, // 数值越大速度滚动越快
                hoverStop: true,
                limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
                direction: 1, // 0向下 1向上 2向左 3向右
              }"
              :ref="`scroll-11111`"
            >
              <div v-for="item in passPatientInfo" class="pass-patient-row">
                <div
                  v-for="(use, useIndex) in item"
                  :class="
                    useIndex === 2
                      ? 'pass-patient-col'
                      : 'pass-patient-col-right'
                  "
                >
                  {{ use.patientName }}
                </div>
              </div>
            </vue-seamless-scroll>
          </div>

          <!-- <ScrollEditX :content="passPatientInfo"/> -->
        </div>
      </div>
    </div>
  </CompOperate>
</template>

<script>
import { v4 as uuid } from "uuid";
import { pxToVw } from "@/utils/common";
import emitter from "@/utils/designer/emitter";
import { buildParentApi } from "@/utils/designer/util";
import ScrollY from "@c/public/seamlessScroll/ScrollY.vue";
import CompOperate from "@c/public/form-designer/devType/modules/compOperate.vue";
import mixin from "@sc/templateDetails/modules/homeMiddle/fieldMixin";
import ScrollX from "@c/public/seamlessScroll/ScrollX.vue";
import ScrollEditY from "@c/public/seamlessScroll/ScrollEditY.vue";
import ScrollEditX from "@c/public/seamlessScroll/ScrollEditX.vue";
import vueSeamlessScroll from 'vue-seamless-scroll';
let buildParent = buildParentApi();
export default {
  name: "scene-DRC-pass-Cartoon-patient-widget",

  componentName: "FieldWidget", //必须固定为FieldWidget，用于接收父级组件的broadcast事件

  mixins: [emitter, mixin],

  components: {
    ScrollEditY,
    ScrollX,
    ScrollEditX,
    CompOperate,
    ScrollY,
    vueSeamlessScroll
  },

  props: {
    widget: Object,
    devType: {
      type: Boolean,
      default: false,
    },
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    designState: {
      type: Boolean,
      default: false,
    },
    subFormRowIndex: {
      /* 子表单组件行索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormColIndex: {
      /* 子表单组件列索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormRowId: {
      /* 子表单组件行Id，唯一id且不可变 */ type: String,
      default: "",
    },
    headTitle: {
      type: String,
      default: "",
    },
    visibleTitle: {
      type: Boolean,
    },
    //prop传入的表单JSON配置
    parentApi: {
      type: Object,
      default: () => buildParentApi(),
    },
  },

  data() {
    return {
      widgetKey: uuid(),
      optionsInfo: Object(),
      pause: require("@a/images/design/pause.png"),
      header: require("@a/images/design/header.jpeg"),
    };
  },

  computed: {
    // 设置的行内样式
    getStyle() {
      return function (val) {
        const self = this;
        let info = self.optionsInfo || Array();
        let Obj = Object();
        switch (val) {
          case "head":
            Reflect.set(Obj, "height", pxToVw(info.headHeight));
            Reflect.set(Obj, "backgroundColor", `${info.backgroundColor}`);
            return Obj;
        }
      };
    },

    // 获取全量医患信息
    getRoomDoctorInfo() {
      let temp = Array();
      let devType = this.devType;
      let roomDoctorInfo = this.$store.getters["getRoomDoctorInfo"];
      if (devType) {
        if (!!roomDoctorInfo.apiData?.length) {
          return roomDoctorInfo.apiData.slice(0, 1);
        } else {
          return temp.push({});
        }
      } else {
        if (!!roomDoctorInfo.mockData?.length) {
          return roomDoctorInfo.mockData.slice(0, 1);
        } else {
          return temp.push({});
        }
      }
    },

    // 获取科室信息
    getRoomDeptInfo() {
      let devType = this.devType;
      let roomDoctorInfo = this.$store.getters["getRoomDeptInfo"];
      if (devType) {
        return roomDoctorInfo.apiData;
      } else {
        return roomDoctorInfo.mockData;
      }
    },

    //获取患者
    getPatient() {
      return function (row, key = "treatingPatient") {
        let list = row[key] || Array();
        switch (key) {
          case "treatingPatient":
            if (list?.length) {
              return list.slice(0, 1);
            } else {
              return new Array(1).fill({});
            }
          case "waitingPatientList":
            if (list?.length >= 2) {
              return list.slice(0, 2);
            } else {
              let fillArr = new Array(2 - list.length).fill({});
              return [...list, ...fillArr];
            }
        }
      };
    },

    // 过号患者信息
    passPatientInfos() {
      let devType = this.devType;
      let waitPatientList = this.$store.getters["getPassPatientInfo"];
      if (devType) {
        return waitPatientList.apiData;
      } else {
        return waitPatientList.mockData;
      }
    },

    // 获取医生头像
    getDoctorPicture() {
      return function (row) {
        let isPause = row?.isPause;
        let header = `/tpleditor/resource/assets/images/header.png`;
        if (!isPause) {
          return `${row?.workerPicture || header}?keyInfo=default`;
        } else {
          return this.pause;
        }
      };
    },

    passPatientInfo() {
      const self = this;
      let patientInfo = self.passPatientInfos || [];
      let len = patientInfo.length;
      if (len < 9) {
        for (let i = 0; i < 9 - len; i++) {
          patientInfo.push({});
        }
      }
      let result = [];
      for (let i = 0; i < patientInfo.length; i += 3) {
        result.push(patientInfo.slice(i, i + 3));
      }
      return result;
      // return self.$lodash.trim(patientHTML);
    },
    passPatientInfoScroll() {
      const self = this;
      let patientInfo = self.passPatientInfos || [];
      let len = patientInfo.length;
      if (len < 9) {
        for (let i = 0; i < 9 - len; i++) {
          patientInfo.push({});
        }
      }
      return patientInfo;
      // return self.$lodash.trim(patientHTML);
    },
  },

  created() {
    this.registerToRefList();
    this.initEventHandler();
    this.handleOnCreated();
  },

  mounted() {
    this.handleOnMounted();
  },

  methods: {
    // 接收父组件传递过来的数据
    executeMethod(key, data) {
      switch (key) {
        case "roomDeptInfo":
          this.$store.dispatch("setRoomDeptInfo", this.$lodash.cloneDeep(data));
          break;
        case "roomDoctorInfo":
          this.$store.dispatch(
            "setRoomDoctorInfo",
            this.$lodash.cloneDeep(data)
          );
          break;
        case "passPatientInfo":
          this.$store.dispatch(
            "setPassPatientInfo",
            this.$lodash.cloneDeep(data)
          );
          break;
      }
    },

    // 异常图片处理
    handleError(event) {
      event.target.src = `/tpleditor/resource/assets/images/header.png?keyInfo=error`;
    },
  },

  watch: {
    field: {
      handler: function (val) {
        this.widgetKey = uuid();
        let key = val.options.config;
        this.optionsInfo = val.options[key];
      },
      deep: true,
      immediate: true,
    },
  },

  destroyed() {
    this.unregisterFromRefList();
  },
};
</script>

<style lang="scss" scoped>
.flex-box-right {
  width: 100%;
  height: 100%;
}
.flex-box-right-one {
  height: 194px;
  display: flex;
  align-items: flex-end;
}
.flex-box-right-one-name-Box {
  width: 316px;
  height: 194px;
  position: relative;
}
.flex-box-right-one-name {
  width: 299px;
  height: 112px;
  position: absolute;
  bottom: 0;
  left: 0;
  // top: 50%;
  font-weight: 600;
  font-size: 80px;
}
.flex-box-right-one-title-Box {
  width: 273px;
  height: 77px;
  font-weight: 600;
  font-size: 55px;
  color: #ff7d29;
  margin-left: 30px;
}
.flex-box-right-Two {
  width: 662px;
  height: 225px;
  font-weight: 400;
  font-size: 33px;
  color: #f47c34;
  margin-top: 52px;
}
.scene-DRC-pass-patient-widget {
  padding: 22px 0 22px 30px;
  color: #333;
  font-size: 40px;
  background: transparent;
  box-sizing: border-box;
  overflow: hidden;

  .widget-inside {
    height: calc(100%);
    border-radius: 18px;
    // padding: 24px 34px 24px 34px;
    box-sizing: border-box;
    overflow: hidden;
    //科室
    .dept-room {
      background: #0059b3;
      box-sizing: border-box;
      border-radius: 20px;
      height: 232px;
      overflow: hidden;

      p {
        color: #ffffff;
        font-size: 90px;
        width: 100%;
        height: calc(100% / 2);
        overflow: hidden;
        line-height: 1.26;
        text-align: center;
      }
    }

    .dept-room-hide {
      display: flex;
      width: 100%;
      justify-content: center;
      align-items: center;
      align-self: center;
      p {
        height: calc(100% / 1) !important;
      }
      .room {
        font-size: 140px;
      }
    }

    .doctor-patient {
      // height: calc(100% - 232px - 516px - 120px - 54px);
      // margin-top: 22px;
      box-sizing: border-box;
      overflow: hidden;
      //医生信息
      .doctor-info {
        height: 471px;
        display: flex;
        min-width: 100%;

        .picture {
          flex: inherit;
          border-radius: 20px;
          overflow: hidden;
          width: 328px;
          height: 100%;
          border: none;
          background: transparent;
          flex-shrink: 0;

          img {
            width: 100%;
          }
        }

        .info {
          flex: inherit;
          display: flex;
          flex-direction: column;
          align-self: center;
          width: calc(100% - 272px);
          padding-left: 30px;
          border: none;
          color: rgba(255, 255, 255, 1);
          background: transparent;

          .item {
            display: flex;

            .sign {
              width: 150px;
              align-self: center;
              font-size: 60px;
            }

            .content {
              width: calc(100% - 180px);
              padding: 0 20px;
              box-sizing: border-box;
              white-space: nowrap;
              align-self: center;
            }
          }

          .name {
            font-size: 72px;
            line-height: 1.4;
            font-weight: 500;
          }

          .level {
            font-size: 72px;
            line-height: 1.4;
            font-weight: 500;
          }

          .major {
            font-size: 72px;
            line-height: 1.4;
            font-weight: 500;
          }
        }
      }

      .patient-area {
        margin-top: 43px;

        .currentBox {
          width: 1018px;
          height: 202px;
          display: flex;
          .title {
            width: 328px;
            height: 202px;
            background: #ff7d29;
            border-radius: 50px 0px 0px 50px;
            font-weight: 500;
            font-size: 70px;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .name {
            width: 690px;
            height: 202px;
            background: #ffffff;
            border-radius: 0px 50px 50px 0px;
            font-weight: 500;
            font-size: 94px;
            color: #ff7d29;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            .touxiangImg {
              width: 102px;
              height: 95px;
              position: absolute;
              bottom: -25%;
              right: -5%;
              z-index: 10;
            }
          }
        }
        .patientBox {
          width: 1018px;
          height: 202px;
          display: flex;
          margin-top: 30px;
          .patientBox-title {
            width: 328px;
            height: 202px;
            background: #ffba41;
            border-radius: 50px 0px 0px 50px;
            font-weight: 500;
            font-size: 70px;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .patientBox-content {
            width: 690px;
            height: 202px;
            background: #ffffff;
            border-radius: 0px 50px 50px 0px;
            font-weight: 500;
            font-size: 94px;
            color: #656565;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            .touxiangImg {
              width: 102px;
              height: 95px;
              position: absolute;
              bottom: -25%;
              right: -5%;
              z-index: 10;
            }
          }
        }
        .patientBox-two {
          width: 1018px;
          height: 202px;
          display: flex;
          margin-top: 30px;
          padding-bottom: 43px;
          .patientBox-title {
            width: 328px;
            height: 202px;
            background: #ffba41;
            border-radius: 50px 0px 0px 50px;
            font-weight: 500;
            font-size: 70px;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .patientBox-content {
            width: 690px;
            height: 202px;
            background: #ffffff;
            border-radius: 0px 50px 50px 0px;
            font-weight: 500;
            font-size: 94px;
            color: #656565;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            .touxiangImg {
              width: 102px;
              height: 95px;
              position: absolute;
              bottom: -25%;
              right: -5%;
              z-index: 10;
            }
          }
        }
      }
    }
    // 过号患者
    .pass-patient-Box {
      width: 1040px;
      height: 401px;
      background: #ffffff;
      border-radius: 50px;
      // margin-top: 43px;
      .pass-patient-title {
        height: 103px;
        font-weight: 500;
        font-size: 48px;
        color: #ff7d29;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .pass-patient-connect {
        height: 300px;
        overflow: hidden;
        .pass-patient-row {
          border-top: 2px solid #ff7d29;
          height: 100px;
          display: flex;
          .pass-patient-col {
            width: 347px;
            font-size: 40px;
            color: #656565;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .pass-patient-col-right {
            width: 347px;
            font-size: 40px;
            color: #656565;
            display: flex;
            justify-content: center;
            align-items: center;
            border-right: 2px solid #ff7d29;
          }
        }
      }
    }
  }
}
</style>
